<template>
  <div>
    <van-search
      v-model="search"
      class="my-nav"
      placeholder="请输入采样人员名称"
      @search="onSearch"
      @cancel="onCancel"
      @blur="onCancel"
    />
    <div class="page_space">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <base-card
          v-for="(item, index) in list"
          :key="index"
          class="mt-15"
          :title="item.title"
          :data="item.data"
          arrow
          @click="goto('/person-details?id=' + item.id)"
        >
          <template #header>
            <div @click.stop>
              <van-checkbox
                v-model="item.checked"
                checked-color="#2163E0"
                shape="square"
                class="mr-10"
                @change="pitchPerson($event, item.id)"
              ></van-checkbox>
            </div>
          </template>
        </base-card>
      </van-list>
    </div>

    <div class="btn_wrap">
      <div class="tip">
        <p>
          已选择<span class="count">{{ personList.length }}项</span>
        </p>
        <p class="all">全选本页</p>
      </div>
      <button class="btn small default" @click="cancelPitch">取消</button>
      <button class="btn small danger" @click="deletePerson">删除</button>
    </div>
  </div>
</template>

<script>
import baseCard from '@/components/base-card'
import { getPerson, enableOrDisableOfBatch } from '@/api/person'
export default {
  name: 'managePerson',
  components: { baseCard },
  data() {
    return {
      search: '',
      checked: true,
      loading: false,
      finished: false, // 触底加载结束
      params: {
        limit: 10,
        page: 1,
        enabled: true,
        name: ''
      },
      list: [],
      personList: []
    }
  },
  methods: {
    fun() {
      console.log('jjjjj')
    },
    // 删除
    async deletePerson() {
      let personListStr = this.personList.join(',')
      const { code } = await enableOrDisableOfBatch(personListStr)
      if (code === '0') {
        this.list = []
        this.params.page = 1
        this.getList(this.params)
      }
    },
    // 取消选中
    cancelPitch() {
      this.personList = []
      this.list.forEach((item) => {
        item.checked = false
      })
    },
    // 选中人员
    pitchPerson(e, id) {
      let exit = this.personList.findIndex((item) => item === id)
      if (e) {
        // true
        this.personList.push(id)
      } else {
        if (exit !== -1) this.personList.splice(exit, 1)
      }
    },
    onSearch(val) {
      this.search = val.trim()
      this.params.name = this.search
      this.params.page = 1
      this.list = []
      this.getList(this.params)
    },
    onCancel() {
      this.search = ''
      this.params.name = ''
      this.params.page = 1
      this.list = []
      this.getList(this.params)
    },
    onClick(name, title) {
      if (title === '已启用') {
        this.params.enabled = true
      } else {
        this.params.enabled = false
      }
      this.list = []
      this.params.page = 1
      this.getList(this.params)
    },
    // 触底加载
    onLoad() {
      this.getList(this.params)
    },
    // 选择采样人员
    async getList(params) {
      const res = await getPerson(params)
      if (res.code === '0') {
        res.data.content.forEach((item) => {
          this.list.push({
            title: item.name,
            id: item.id,
            data: [
              {
                key: '所属区划',
                value: item.allAreaName,
                checked: false
              },
              {
                key: '人员编号',
                value: item.code,
                checked: false
              }
            ]
          })
        })
        // 加载状态结束
        this.loading = false
        this.params.page++
        // 数据全部加载完成
        if (res.data.last) {
          this.finished = true
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.my-nav {
  position: sticky;
  top: 0;
  z-index: 999;
}
.btn_wrap {
  .tip {
    font-family: PingFang SC Medium;
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0px;
    /* 粤商通/常规黑色 */
    color: #171819;
    .count {
      /* 粤商通/常规蓝色 */
      color: #2163e0;
      margin-left: 5px;
    }
    .all {
      color: #b2b8bd;
      margin-top: 6px;
    }
  }
}
</style>
